{% extends 'base.html' %}

{% block javascript %}
	
	{% if not formulario.id %}
		var i = 1;
	{% else %}
		var i = {{ campos|length }};
	{% endif %}
	
    function ocultar(){
    	
    }
    
    function eliminar(){
        if(i>1){
            i--;
            id_capa = "nuevo-campo" + (i);
            capa = document.getElementById(id_capa);
            capa.parentNode.removeChild(capa);
            document.getElementById("campos").value = i;
        }
        else{
        	alert("El formulario debe tener por lo menos un campo.");
        }
    }
{% endblock %}

{% block jquery %}
        $( '.cancelar' ).click(function() {
            location.href = "formularios";
		});
        
        $(function() {
            $( "#fecha-publicacion" ).datepicker();
        });
        $(function() {
            $( "#fecha-vencimiento" ).datepicker();
        });
        
        $( '#insertar' ).click(function() {
        	a = $("#nuevo-campo0").clone();
            a.attr('id', function(_, id) { return (id.replace('0','')) + i });
            a.find(".elemento").each(function() {
                $(this).attr({
                  'id': function(_, id) { return (id.replace('0','')) + i },
                  'name': function(_, name) { return (name.replace('0','')) + i },
                  'value': ''               
                });
              }).end().appendTo("#formulario-campos");
              i++;
              $('#campos').attr('value', i);
            
		});
		

{% endblock %}		


{% block ruta %}
		
{% endblock %}

{% block contenido %}
<div id="formulario">
	<form id="formulario-producto" action="formuario_nuevo/guardar" method="post">
    	{% csrf_token %}
    	<div id="formulario-opciones">
            <div id="formulario-opciones-izq">
                <button type="button" id="cancelar" class="btn cancelar">Cancelar</button>
            </div>
            <div id="formulario-opciones-der">
                <button type="button" id="vista-preiva" class="btn">Vista previa</button>
                <button type="submit" id="guardar" class="btn">Guardar</button>
            </div>
        </div>
	    
    	<table width="100%" class="nuevo-formulario">
            <tr>
                <td class="header"><span>Título</span></td>
                <td><input type="text" name="titulo" id="titulo" required="required" placeholder="Nombre del formulario" 
                value="{{ formulario.titulo }}"/></td>
            </tr>
            <tr>
                <td class="header"><span>Descripción</span></td>
                <td><textarea name="descripcion" id="descripcion" rows="2" cols="60" style="font:12px Arial;" `
					placeholder="Para qué sirve el formulario">{{ formulario.descripcion}}</textarea></td>
            </tr>
            <tr>
                <td class="header"><span>Palabras clave</span></td>
                <td><input type="text" name="palabras-clave" id="palabras-clave" required="required" 
                placeholder="Separadas por coma" value="{{ formulario.palabras_clave }}"/></td>
            </tr>
            <tr>
                <td class="header"><span>Publicado</span></td>
                <td><input type="checkbox" id="publicado" name="publicado" {% if formulario.publicado  %} checked="checked" {% endif %}/></td>
            </tr>
            <tr>
                <td class="header"><span>Fecha publicación:</span></td>
                <td><input type="text" name="fecha-publicacion" id="fecha-publicacion" value="{{ formulario.fecha_publicacion|date:'m/d/Y' }}"/></td>
                <!--	http://jqueryui.com/demos/datepicker/	-->
            </tr>
            <tr>
                <td class="header"><span>Fecha vencimiento:</span></td>
                <td><input type="text" name="fecha-vencimiento" id="fecha-vencimiento" value="{{ formulario.fecha_vencimiento|date:'m/d/Y' }}"/></td>
            </tr>
            <tr>
                <td class="header"><span>Duración</span></td>
                <td>
                    <input type="number" name="tiempo" id="tiempo" min="0" placeholder="Unidad de tiempo" value="{{ formulario.duracion }}"/>
                    <select name="unidad-tiempo" id="unidad-tiempo">
                    {% for tiempo in unidadTiempo %}
                    	<option value="{{ tiempo.id }}" {% if tiempo.id == formulario.unidad_tiempo_id %} selected="selected" {% endif %} >{{ tiempo.nombre }}</option>
                    {% endfor %}
                    </select>
                </td>
            </tr>
        </table>
        <div id="formulario-campos">
        {% if not campos %}
        	<div id="nuevo-campo0" class="elemento0">
            	<input type="hidden" id="campo0" name="campo0" class="elemento"/>
            	<table width="100%" class="nuevo-formulario">
                    <tr>
                        <td class="header" width="20%"><span>Taxonomía</span></td>
							<td width="80%">
                            <select name="taxonomia0" id="taxonomia0" class="elemento">
                                {% for taxonomia in taxonomiaCampo %}
                                    <option value="{{ taxonomia.id }}">{{ taxonomia.nombre }}</option>
                                {% endfor %}
							</select>
						</td>
                    </tr>
                    <tr>
                        <td class="header"><span>Ayuda</span></td>
                        <td><input type="text" name="ayuda0" id="ayuda0" size="40" class="elemento" placeholder="Texto de ayuda para el campo"/></td>
                    </tr>
                    <tr>
                        <td class="header"><span>Etiqueta</span></td>
                        <td><input type="text" name="etiqueta0" id="etiqueta0" size="40" required="required" class="elemento" placeholder="Etiqueta del campo"/></td>
                    </tr>
                    <tr>    
                        <td class="header"><span>Tipo de campo</span></td>
                        <td>
                        	<select name="tipo-campo0" id="tipo-campo0" class="elemento">
                                {% for campo in tipoCampo %}
                                    <option value="{{ campo.id }}">{{ campo.descripcion }}</option>
                                {% endfor %}
							</select>
                        </td>
                    </tr>
                    <tr>    
                        <td class="header"><span>Obligatorio</span></td>
                        <td><input type="checkbox" id="obligatorio0" name="obligatorio0" value="true" class="elemento"/> Obligatorio</td>
                    </tr>
                    <tr>    
                        <td class="header"><span>Orden</span></td>
                        <td><input type="number" name="orden0" id="orden0" class="elemento" min="0" placeholder="Orden del campo en el formulario"/></td>
                    </tr>
                    
                </table>
			</div>
            
            
        {% else %}
            {% for campo in campos %}
				  <div id="nuevo-campo{{ forloop.counter0 }}" class="elemento">
                  <input type="hidden" id="campo{{ forloop.counter0 }}" name="campo{{ forloop.counter0 }}" class="elemento" value="{{ campo.id }}"/>
                    <table width="100%" class="nuevo-formulario">
                        <tr>
                            <td class="header" width="20%"><span>Taxonomía</span></td>
                                <td width="80%">
                                <select name="taxonomia{{ forloop.counter0 }}" id="taxonomia{{ forloop.counter0 }}" class="elemento">
                                    {% for taxonomia in taxonomiaCampo %}
                                        <option value="{{ taxonomia.id }}" {% if campo.taxonomia_id = taxonomia.id %} selected="selected" {% endif %}>{{ taxonomia.nombre }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="header"><span>Ayuda</span></td>
                            <td><input type="text" name="ayuda{{ forloop.counter0 }}" id="ayuda{{ forloop.counter0 }}" size="40" class="elemento" placeholder="Texto de ayuda para el campo" value="{{ campo.ayuda }}"/></td>
                        </tr>
                        <tr>
                            <td class="header"><span>Etiqueta</span></td>
                            <td><input type="text" name="etiqueta{{ forloop.counter0 }}" id="etiqueta{{ forloop.counter0 }}" size="40" required="required" class="elemento" placeholder="Etiqueta del campo" value="{{ campo.etiqueta }}"/></td>
                        </tr>
                        <tr>    
                            <td class="header"><span>Tipo de campo</span></td>
                            <td>
                                <select name="tipo-campo{{ forloop.counter0 }}" id="tipo-campo{{ forloop.counter0 }}" class="elemento">
                                    {% for tcampo in tipoCampo %}
                                        <option value="{{ tcampo.id }}" {% if campo.tipo_campo_id = tcampo.id %} selected="selected" {% endif %}>{{ tcampo.descripcion }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                        </tr>
                        <tr>    
                            <td class="header"><span>Obligatorio</span></td>
                            <td><input type="checkbox" id="obligatorio{{ forloop.counter0 }}" name="obligatorio{{ forloop.counter0 }}" class="elemento" {% if campo.obligatorio %} checked="checked" {% endif %}/> Obligatorio</td>
                        </tr>
                        <tr>    
                            <td class="header"><span>Orden</span></td>
                            <td><input type="number" name="orden{{ forloop.counter0 }}" id="orden{{ forloop.counter0 }}" class="elemento" min="0" placeholder="Orden del campo en el formulario" value="{{ campo.orden }}"/></td>
                        </tr>
                        
                    </table>
                </div>  	
            {% endfor %}
        {% endif %}
        </div>
        <div id="formulario-campos-nav">
            <button type="button" id="insertar" class="btn">Insertar</button>
            <button type="button" id="oculta" class="elemento" onclick="ocultar()">Ocultar</button>
            <button type="button" id="elimina" class="elemento" onclick="eliminar()">Eliminar</button>
            <input type="hidden" id="campos" name="campos" value="{{ campos|length }}"/>
            <input type="hidden" id="id_formulario" name="id_formulario" value="{{ formulario.id }}"/>
        </div>
		<div id="formulario-opciones">
            <div id="formulario-opciones-izq">
                <button type="button" id="cancelar" class="btn cancelar">Cancelar</button>
            </div>
            <div id="formulario-opciones-der">
                <button type="button" id="vista-previa" class="btn">Vista previa</button>
                <button type="submit" id="guardar" class="btn">Guardar</button>
            </div>
        </div>
	</form>
</div>
{% endblock %}